<template>
  <div class="account-card">
    <div class="award">
      集蜜卡. 集了6次即可享受分红池
    </div>
    <div class="star">
      <cube-rate v-model="value" :max="max" disabled />
    </div>
    <ul class="condition">
      <li>购买获取1张</li>
      <li>推荐1人获取1张</li>
    </ul>
    <loading :show="loading" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
export default {
  name: 'AccountCard',
  components: {
    Loading
  },
  data() {
    return {
      value: 3,
      max: 6,
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = false
      api.Account.getCard().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.value = +data.card
        this.max = +data.max
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.account-card
  padding 10px
  .award
    padding 10px
    background white
  .condition
    text-align left
    padding 15px
    background white
    margin-top 10px
    li
      height 35px
      line-height 35px
  .star
    background white
    padding 15px 0
    margin-top 10px
</style>
